{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>新建智能体 - 数据源管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" />
    <style>
      .sidebar {
        height: 100vh;
        background-color: #343a40;
        color: white;
        padding-top: 20px;
      }
      .sidebar .nav-link {
        color: #adb5bd;
        border-radius: 0;
      }
      .sidebar .nav-link.active {
        background-color: #0d6efd;
        color: white;
      }
      .content {
        padding: 20px;
      }
      .form-group {
        margin-bottom: 1.5rem;
      }
      .required::after {
        content: "*"; 
        color: red;
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <!-- 侧边栏 -->
        <div class="col-md-2 d-none d-md-block sidebar">
          <div class="text-center mb-4">
            <h3>数据管理</h3>
          </div>
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link" href="{% url 'datasource_list' %}">
                <i class="bi bi-database me-2"></i>
                数据源管理
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="{% url 'agent_management' %}">
                <i class="bi bi-robot me-2"></i>
                智能体管理
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'operation_log' %}">
                <i class="bi bi-clock-history me-2"></i>
                操作日志
              </a>
            </li>
          </ul>
        </div>

        <!-- 主内容区 -->
        <main class="col-md-10 ms-sm-auto px-md-4 content">
          <!-- 顶部导航 -->
          <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <div class="container-fluid">
              <a href="{% url 'agent_management' %}" class="btn btn-outline-secondary me-2">
                <i class="bi bi-arrow-left me-1"></i>
                返回列表
              </a>
              <h4 class="mb-0">新建智能体</h4>
              <div class="d-flex ms-auto">
                <button class="btn btn-outline-secondary me-2">
                  <i class="bi bi-person me-1"></i>
                  登录
                </button>
              </div>
            </div>
          </nav>

          <!-- 智能体表单卡片 -->
          <div class="card mb-4">
            <div class="card-header">
              <h5 class="mb-0">智能体基本信息</h5>
            </div>
            <div class="card-body">
              <form method="post">
                {% csrf_token %}
                <div class="form-group">
                  <label for="agentName" class="required">智能体名称</label>
                  <input type="text" class="form-control" id="agentName" name="agentName" placeholder="请输入智能体名称" required />
                </div>

                <div class="form-group">
                  <label for="agentDescription">智能体描述</label>
                  <textarea class="form-control" id="agentDescription" name="agentDescription" rows="3" placeholder="请输入智能体描述"></textarea>
                </div>

                <div class="form-group">
                  <label for="datasourceSelect" class="required">关联数据源</label>
                  <select class="form-select" id="datasourceSelect" name="datasourceId" required>
                    <option value="">请选择数据源</option>
                    {% for datasource in datasources %}
                    <option value="{{ datasource.id }}">{{ datasource.name }} ({{ datasource.engine }})</option>
                    {% endfor %}
                  </select>
                </div>

                <div class="form-group">
                  <label class="required">执行方式</label>
                  <div class="form-check mb-2">
                    <input class="form-check-input" type="radio" name="executionType" id="manualExecution" value="manual" checked />
                    <label class="form-check-label" for="manualExecution">手动执行</label>
                  </div>
                  <div class="form-check mb-2">
                    <input class="form-check-input" type="radio" name="executionType" id="scheduledExecution" value="scheduled" />
                    <label class="form-check-label" for="scheduledExecution">定时执行</label>
                  </div>
                </div>

                <div class="form-group" id="scheduleConfig" style="display: none;">
                  <label for="scheduleType" class="required">调度类型</label>
                  <select class="form-select" id="scheduleType" name="scheduleType">
                    <option value="interval">间隔执行</option>
                    <option value="cron">Cron表达式</option>
                  </select>

                  <div id="intervalConfig" style="display: block; margin-top: 15px;">
                    <div class="row">
                      <div class="col-md-6">
                        <label for="intervalValue" class="required">间隔值</label>
                        <input type="number" class="form-control" id="intervalValue" name="intervalValue" placeholder="请输入间隔值" min="1" value="1" />
                      </div>
                      <div class="col-md-6">
                        <label for="intervalUnit" class="required">时间单位</label>
                        <select class="form-select" id="intervalUnit" name="intervalUnit">
                          <option value="minutes">分钟</option>
                          <option value="hours">小时</option>
                          <option value="days">天</option>
                          <option value="weeks">周</option>
                        </select>
                      </div>
                    </div>
                  </div>

                  <div id="cronConfig" style="display: none; margin-top: 15px;">
                    <label for="cronExpression" class="required">Cron表达式</label>
                    <input type="text" class="form-control" id="cronExpression" name="cronExpression" placeholder="例如: 0 0 * * * 表示每天午夜执行" />
                    <small class="form-text text-muted mt-1">Cron表达式格式: 分钟 小时 日期 月份 星期</small>
                  </div>
                </div>

                <div class="form-group">
                  <label for="destinationAgent" class="required">目标智能体</label>
                  <input type="text" class="form-control" id="destinationAgent" name="destinationAgent" placeholder="请输入目标智能体名称" required />
                  <small class="form-text text-muted mt-1">数据抽取后发送到的目标智能体</small>
                </div>

                <div class="d-flex justify-content-end gap-2 mt-4">
                  <button type="button" class="btn btn-outline-secondary" onclick="window.location.href='{% url 'agent_management' %}'">取消</button>
                  <button type="submit" class="btn btn-primary">创建智能体</button>
                </div>
              </form>
            </div>
          </div>
        </main>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      // 执行方式切换
      document.querySelectorAll('input[name="executionType"]').forEach(radio => {
        radio.addEventListener('change', function() {
          if (this.value === 'scheduled') {
            document.getElementById('scheduleConfig').style.display = 'block';
          } else {
            document.getElementById('scheduleConfig').style.display = 'none';
          }
        });
      });

      // 调度类型切换
      document.getElementById('scheduleType').addEventListener('change', function() {
        if (this.value === 'interval') {
          document.getElementById('intervalConfig').style.display = 'block';
          document.getElementById('cronConfig').style.display = 'none';
        } else {
          document.getElementById('intervalConfig').style.display = 'none';
          document.getElementById('cronConfig').style.display = 'block';
        }
      });
    </script>
  </body>
</html>